<template>
	<div class="index">
		<v-header></v-header>
		<div class="compile">
			中文 / EN
			<select @change="selectLangVal" v-model="selected">
		        <option v-for="item in lang" v-model="item.value">{{ item.value }}</option>
		    </select>
		</div>

		<div class="index-title">
			<img src="../../kbc/h5/img/css/index/toutiao.png">KBC金币在美国正式的使用！
			<!--<img v-if="this.$i18n.locale === 'zh'" src="../../kbc/h5/img/css/index/toutiao.png">
			<img v-else-if="this.$i18n.locale === 'en'" src="../../kbc/h5/img/css/index/anqun.png">KBC金币在美国正式的使用！-->
		</div>
		<div class="row">
			<div class="item">
				<h2>{{$t("home.MyMoney")}}</h2>
				<p class="red">{{userMoneyTotal}} K币</p>
			</div>
			<div class="item">
				<h2>{{$t("home.TodayPrice")}}</h2>
				<p class="red">{{todayPrice}} K币</p>
			</div>
			<div class="item">
				<h2>{{$t("home.TeamHolding")}}</h2>
				<p class="red">{{teamMoneyTotal}} K币</p>
			</div>
		</div>
		<div class="row">
			<div class="item" v-on:click='go("Wallet")'>
				<p><img src="../../kbc/h5/img/css/index/qianbao.png"></p>
				<h3>{{$t("home.KBCPurse")}}</h3>

			</div>
			<div class="item" v-on:click='go("TradingCenter")'>
				<p><img src="../../kbc/h5/img/css/index/jiaoying.png"></p>
				<h3>{{$t("home.TradingCenter")}}</h3>

			</div>
			<div class="item" v-on:click='go("MyTeam")'>
				<p><img src="../../kbc/h5/img/css/index/wodetuandui.png"></p>
				<h3>{{$t("home.MyTeam")}}</h3>
			</div>
		</div>
		<div class="row">
			<div class="item" v-on:click='go("0")'>
				<p><img src="../../kbc/h5/img/css/index/baozhang.png"></p>
				<h3>{{$t("home.HealthStatus")}}</h3>

			</div>
			<div class="item" v-on:click='go("0")'>
				<p><img src="../../kbc/h5/img/css/index/yiyao.png"></p>
				<h3>{{$t("home.KBCApplication")}}</h3>

			</div>
			<div class="item" v-on:click='go("0")'>
				<p><img src="../../kbc/h5/img/css/index/zhijing.png"></p>
				<h3>{{$t("home.FingertipGame")}}</h3>

			</div>
		</div>
		<div class="row">
			<div class="item" v-on:click='go("0")'>
				<p><img src="../../kbc/h5/img/css/index/anqun.png"></p>
				<h3>{{$t("home.SecurityAwareness")}}</h3>

			</div>
			<div class="item" v-on:click='go("0")'>
				<p><img src="../../kbc/h5/img/css/index/xingtong.png"></p>
				<h3>{{$t("home.SystemBulletin")}}</h3>

			</div>
			<div class="item">
				<p><img src="../../kbc/h5/img/css/index/bangzhong.png"></p>
				<h3>{{$t("home.MyHelp")}}</h3>

			</div>
		</div>
		<div style="clear: both;"></div>
		<div class="index-min-title"><img src="../../kbc/h5/img/css/index/shenghuo.png">{{$t("home.KBCLife")}}</div>
		<div style="margin-top: 0.5rem;" v-on:click='go("0")'>
			<img src="../../kbc/h5/img/css/index/chongzhi.png">
		</div>
		<div class="picture">
			<div class="fl left" v-on:click='go("0")'><img src="../../kbc/h5/img/css/index/jiayouka.png"></div>
			<div class="fl advertisement">
				<div class="fl" v-on:click='go("0")'><img src="../../kbc/h5/img/css/index/huochepiao.png"></div>
				<div class="fl" v-on:click='go("0")'><img src="../../kbc/h5/img/css/index/jpiao.png"></div>
				<div class="cl" v-on:click='go("0")'><img src="../../kbc/h5/img/css/index/dache.png"></div>
			</div>
		</div>
	</div>

</template>
<style>
	.index{width: 100%; height: 100%;position: absolute;top:0;left:0;top:0;bottom: 0;
	box-sizing: border-box; padding-top:4rem; overflow-y: scroll; padding-bottom:5rem;}
	.index .row .item img{width: 50px;height: 50px;}
    .index .compile{position:fixed; top:1.2rem;right:1.2rem; z-index: 1000; color:#fff;font-size: 1.2rem;}
    .index .compile select{ width:60px;}
    .index .picture{display: flex;border:1px solid #FFFFFF}
    .index .left{ width:35%;}
    .index .fl.left{background: #FFFFFF;}
    .index .advertisement{ width:65%;background: #FFFFFF;}
    .index .advertisement .fl{ width: 50%;float: left;}
    .index .advertisement .cl{ width: 100%; display: block;}
    .index .index-title{ display: inline-block;width: 100%; background: #fff; padding: 1rem;font-size:1.1rem;box-sizing: border-box; margin-top:0.5rem;}
	.index .index-title img{width: 80px;height: 20px;padding-right: 1rem; vertical-align:middle;}
	.index .index-min-title{background: #fff; padding: 1rem;font-size:1.2rem; margin-top:0.5rem;}
	.index .index-min-title img{width: 20px;height: 20px;padding-right: 1rem; vertical-align:middle;}
</style>
<script>
	import router from './../router';
	import util from './../js/util/util.js';
	import vHeader from './common/Header.vue';
	import { Cell, Toast } from 'mint-ui';
	export default {
		data() {
			return {
				teamData:{},
				userMoneyTotal:'0.0',
				teamMoneyTotal:'0.0',
				todayPrice :'0.0',
				lang: [
		            {value: '中文'},
		            {value: 'EN'}
		        ],
		        selected:this.$i18n.locale == 'en'?'EN':'中文'
			}
		},
		created() {
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = true; //显示底部导航
			this.$store.state.flag = 0;
			
			var $this = this;
		},
		components: {
			vHeader,
			Cell
		},
		methods: {
			go: function(url) {
				if(url != "0") {
					util.pushRouter(router, url);
				} else {
					this.$toast('待开放.....敬请关注！');
				}
			},
			walletInfo:function(){ //获取钱包信息
				let $this = this;
				//显示数据
        		 util.Ajax('/kbc/walletInfo',"GET",{},function(data){
         	         if(data) {
						if(data.code == "0") {
							 $this.todayPrice = data.walletMap.tradePrice;//加载当日成交价
						} else {
							Toast(data.msg);
						}
					}
		        })
			},
			selectLangVal: function(ele) { //语言选择
	            this.selected = ele.target.value;
	            if(this.selected == "中文"){
	            	this.$i18n.locale = 'zh';
	            	util.setCookie("PLAY_LANG",'zh');
	            }else if(this.selected == "EN"){
	            	this.$i18n.locale = 'en';
	            	util.setCookie("PLAY_LANG",'en');
	            }
	            window.location.reload();
	        },

		},
		mounted: function() { //加载完成后执行
			let $this = this;
			util.Ajax('/userCentered/teamInfoCount', "POST", {}, function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.teamData = data.teamInfoMap;
						$this.userMoneyTotal = data.teamInfoMap.userMoneyTotal;
						$this.teamMoneyTotal = data.teamInfoMap.teamMoneyTotal;
						$this.walletInfo();
					} else {
						Toast(data.msg);
					}
				}
			})
		}
	}
</script>